<template>
  <div>
    <span class="el-menu__title" style="text-align: center;font-size: medium">薪资</span>
    <div style="margin-top: 10px" >
      <span v-show="formsa" style="color: #0682C5">请输入密码验证登录状态： </span>
      <el-form ref="salary" class="loginContainer" v-show="formsa">
        <el-form-item prop="oldValue" label="密码">
          <el-input v-model="pass" show-password clearable maxlength="15"
                    placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-button type="primary" style="width: 100%" @click.native="checksa()">验证</el-button>
      </el-form>

      <el-row v-show="sa">
        <span style="color: #0682C5">实发： </span>
        <span style="color: black"> {{$store.getters.getLoginParam.salary}}</span>
      </el-row>
      <el-row></el-row>
      <el-row></el-row>
    </div>
  </div>
</template>

<script>
    export default {
        name: "salary",
        data() {
            return {
                sa: false,
                pass: "",
                User: {},
                formsa: true,
            }
        },
        methods: {
            checksa() {
                if (this.pass === this.User.password) {
                    this.sa = true
                    this.formsa = false
                }

            },
            getLoginInfo() {
                this.User = JSON.parse(this.$store.state.loginParam)
            }
        },
        mounted() {
            this.getLoginInfo()
        }
    }
</script>

<style scoped>
  .loginContainer {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 15px 35px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  .loginTitle {
    margin: 0px auto 40px auto;
    text-align: center;
  }
</style>
